<template>
	<view>
		<view class="main">

			<view class="box">
				<view class="up">
					<view class="left">
						订单编号: {{list.orderSn}}
					</view>
				</view>
				<view class="center">
					<view class="center-c">
						<image :src="list.productPic" mode=""></image>
						<view class="text">
							<view class="c-top">
								<view class="title">
									{{list.productName}}
								</view>
								<view class="price">
									￥{{list.productPrice}}
								</view>
							</view>
							<view class="c-c">
								<view class="top">
									<view class="left">
										编号: {{list.id}}
									</view>
									<view class="right">
										X{{list.productQuantity}}
									</view>
								</view>
								<view class="guige">
									<view>
										规格:
									</view>
									<view class="norms">
										<view class="n-box" v-for="(item1,index) in list.productAttr" :key="index">
											{{item1.key}}:
											{{item1.value}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="bottom">
					<view class="b-top">
						<view class="time">
							时间: {{list.createTime}}
						</view>
						<view class="total">
							合计: ￥{{list.totalPrice}}
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="num">
					<view class="text">
						请选择退单数量:
					</view>
					<view>

						{{list.productQuantity}}
					</view>
				</view>
				<view class="inp">
					<view class="text">
						请输入退货原因:
					</view>
					<view>

						<input @input="yy" type="text" value="" placeholder="请输入退货原因" />
					</view>
				</view>
				<view class="num">
					<view class="text">
						请选择退货地址:
					</view>
					<picker mode="selector" :range="Addrss" @change="pick">
						<view>{{address}}</view>
					</picker>
				</view>
				<view class="inp">
					<view class="left">
						请输入问题描述:
					</view>
					<view class="right">
						<textarea @input="zz" value="" placeholder="请输入问题描述" />
						</view>
					
				</view>
				<view class="upload">
					<view class="text">
						<view class="top">
							温馨提醒:
						</view>
						<view class="down">
							上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张
						</view>
					</view>
					<view class="upimg">
						<view class="imgbox" @tap="slectedImg">
							<image src="/static/icons/jia.png" mode=""></image>
							<view>选择图片</view>
						</view>
						<view v-for="(item,index) in imgList" :key="index" class="seleimg">
							<image :src="item.path" mode=""></image>
							<view class="del" @tap="imgDel(index)">
								<image src="../../../static/icons/xxxx.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="_sub" @tap="upload">
			提交
		</view>
	</view>
</template>

<script>
	import baseUrl from "@/api/baseUrl.js"
	import {
		getPreOrderById,
		getCompanyAddrss,
		addOrderReturnApply
	} from "@/api/mine/mine.js"
	export default {
		data() {
			return {
				list: [],
				Addrss: [],
				number: '',
				reason:'',
				address:'请选择退货地址',
				yyText:'',
				zzText:'',
				orderItemId:'',
				imgList:[],
				url:'',
				id:'',
				addressidlist:'',
				addressid:''
			}
		},
		onLoad(a) {
			this.id = a.id
			this.orderItemId = a.id1
			console.log(this.orderItemId)
			this.getOrderInfo(a.id,a.id1)
			this.getAddrss()
			
		},
		methods: {
			getOrderInfo(val,val1) {
				getPreOrderById(val).then(res => {
					// console.log(res)
					this.list = res.data.orderItems.find(el=>{
						return el.id == val1
					})
					console.log(this.list)
					this.number = this.list.productQuantity
					this.list.productAttr = JSON.parse(this.list.productAttr)
				})
			},
			getAddrss() {
				getCompanyAddrss().then(res => {
					// console.log(res)
					this.Addrss = res.data.items.map(a => a.addressName);
					this.addressidlist = res.data.items.map(a => a.id);
					console.log(this.addressid)
				})
			},
			pick(e){
				var index = e.detail.value
				this.address = this.Addrss[index]
				this.addressid = this.addressidlist[index]
				console.log(this.addressid)
			},
			yy(e){
				this.yyText = e.detail.value
			},
			zz(e){
				this.zzText = e.detail.value
			},
			upload(){
				var list = []
				console.log(this.imgList)
				this.imgList.forEach(ele=>{
					var pro = new Promise(function(resolve,rejected){
						uni.uploadFile({
							url:baseUrl + "/lejuClient/orderReturn/uploadImg",
							filePath:ele.path,
							name:"file",
							success(res){
								// console.log(res);
								resolve(res)
							},
							fail(res) {
								rejected(res)
							}
						})
					})
					list.push(pro)
				});
				Promise.all(list)
				.then(res =>{
					let nwelist = [];
					res.forEach(el => nwelist.push(JSON.parse(el.data).data.fileUrl))
					  this.url = nwelist.join(',')
					  this.sub()
				})
			},
			slectedImg(){
				var _this = this;
				uni.chooseImage({
					success(res) {
						console.log(res);
						if(_this.imgList.length + res.tempFiles.length >3){ // 对图片数量做限制
							uni.showToast({
								title:"选择图片数量大于3，请重新上传"
							})
							return 
						};
						var result =  res.tempFiles.find(ele =>{
							if(ele.size > 1024*1024){
								return ele
							}
						})
						if(result){ // 对图片大小做限制
							uni.showToast({
								title:"单个图片大小超过1m，请重新选择图片",
								icon:"none"
							})
							return
						}
						var resultList = res.tempFiles;
						_this.imgList = resultList
						// _this.imgList.push(resultList)
						console.log(_this.imgList)
					}
				})
			},
			imgDel(val){
				this.imgList.splice(val,1);
				console.log(this.imgList)
			},
			sub(){
				addOrderReturnApply({
						"companyAddressId": this.addressid,
					  "count": this.number,
					  "description": this.zzText,
					  "orderId": this.id,
					  "orderItemId": this.orderItemId,
					  "proofPics": this.url,
					  "reason": this.yyText
				}).then(res=>{
					console.log(res)
					if(res.success){
						uni.showToast({
						    title: '操作成功',
						    duration: 2000
						});
						setTimeout(()=>{
							uni.switchTab({
								url: `/pages/mine/mine`
							})
						},1000)
					}else{
						uni.showToast({
						    title: `${res.message}`,
							icon:'none',
						    duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './css/orderReturns.scss'
</style>
